<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @addTask="addTaskHandler" :list="list"></TodoHeader>
    <TodoMain :list="list"></TodoMain>
    <TodoFooter></TodoFooter>
  </section>
</template>

<script>
// 步骤流程
// 目标1: 渲染数据
// 1.1 将 list 数据传给 TODOMain 组件
// 1.2 在子组件中使用 v-for 循环展示数据
// 1.3 在子组件中使用 v-model 版型复选框状态
// 1.4 在子组件中使用动态类名完成样式修改

// 目标2: 添加数据
// 用户输入任务名的文本框在子组件中, list 数据在 App.vue 父组件中
// 2.1 给输入框进行双向绑定
// 2.2 给输入框绑定键盘按下事件 (按键修饰符 .enter)
// 2.3 添加数据时先做非空校验
// 2.4 由于 list 在 App.vue 中, 所以需要用到子传父的技术
// 2.5 在父组件中给子组件绑定一个自定义事件 addTask
// 2.6 当用户按下回车时, 子组件中触发事件, 传递要添加的任务名给父组件
// 2.7 父组件中收到数据, 将数据添加到 list
// 2.8 list 变化会通知所有子组件, 页面会重新渲染
// 2.9 在子组件中, 触发事件后清空文本框

// 目标3: 删除数据
// 用户点击叉叉在子组件 TodoMain 中
// 3.1 给 x 绑定点击事件, 传入 id
// 3.2 将 id 传给父组件
// 3.3 父组件收到 id 后, 根据 id 删除对应的数据
// 3.4 将数据全部删除后, 添加数据时需要处理默认的 id

// 目标4: 统计任务数量
// 4.1 父组件向子组件 TodoFooter 传递 list 数据
// 4.2 子组件中找到相应的地方显示 list.length 即可

// 目标5: 按任务类型筛选
// 需求1: 点谁谁亮
// 5.1 定义了一个状态变量 isSel, 取值范围: all / yes / no 自定义
// 5.2 动态绑定 class, 让 全部/未完成/已完成 三个标签根据 isSel 的状态来设置 selected 类名是否生效
// 5.3 给 全部/未完成/已完成 三个标签绑定点击事件, 点击时修改 isSel 的状态, isSel 被改变后 会自动让 类名修改

// 需求2: 筛选出对应的数据显示
// 5.4 将 isSel 从子组件传递给父组件
// 5.5 父组件收到后保存到 data 中(以便后续使用)
// 5.6 定义计算属性, 根据收到的 isSel 状态来决定显示什么数据(filter)
// 5.7 修改传给子组件的数据 list -> showList

// 目标6: 清空已完成
// 6.1 给子组件的清空标签绑定点击事件
// 6.2 点击时需要通知父组件 —— 子传父
// 6.3 在父组件中给子组件绑定自定义事件
// 6.4 子组件中点击清空标签时触发自定义事件
// 6.5 父组件事件被触发时, 过滤所有未完成的数据并覆盖 list 数组

// 目标7: 数据缓存
// 7.1 使用 watch 侦听器深度监听 list 数据
// 7.2 数据变化时使用 localStorage 存储数据
// 7.3 list 初始加载时使用 localStorage 获取数据
// 7.4 处理空数据的情况

// 目标8: 全选功能
// 需求1: 点击全选所有小选框受到影响
// 8.1 给全选框进行双向绑定一个 计算属性
// 8.2 定义计算属性完整写法
// 8.3 在计算属性的 set 方法中将所有数据的 isDone 修改为最新的值
// 8.4 从父组件中将 list 所有数据传递给子组件 TodoHeader

// 需求2: 小选框全部勾选时, 全选框受到影响
// 8.5 在 isAll 的 get 方法中统计所有小选框的状态, 来决定 isAll 的状态
// 8.6 如果数组没有数据, 全选状态为 false

// 1.0 样式引入
import "./styles/base.css";
import "./styles/index.css";

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

export default {
  data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  methods: {
    addTaskHandler(taskName) {
      let id =
        this.list.length > 0 ? this.list[this.list.length - 1] + id + 1 : 100;
      this.list.push({
        id,
        name: taskName,
        isDone: false,
      });
    },
  },
};
</script>